import TitleBar from "../../components/titleBar";
import {
  SettingOutlined,
  CaretDownOutlined,
  FieldTimeOutlined,
  InfoCircleFilled,
  BulbFilled,
  ApiFilled,
  CameraFilled,
  ExperimentFilled,
} from "@ant-design/icons";
import ReactECharts from "echarts-for-react";
import "./index.css";
import { useEffect, useState } from "react";
import { Progress, Select } from "antd";
function Fenxi() {
  let [xiaohao, setxiaohao] = useState([
    { id: 1, title: "卧室1", count: 12, juli: 1034, color: "#05c985" },
    { id: 2, title: "工作室", count: 16, juli: 1034, color: "#ffab4f" },
    { id: 3, title: "卧室2", count: 32, juli: 1034, color: "#ee423d" },
    { id: 4, title: "厨房", count: 18, juli: 1034, color: "#843fa0" },
  ]);
  let chartsdata = [
    {
      grid: {
        left: 30,
        top: 10,
        bottom: 30,
        right: 30,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#242e42",
          },
        },
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
      },
      yAxis: {
        type: "value",
        scale: true,
        splitLine: {
          show: true,
          lineStyle: {
            type: "soild",
            color: "#242e42",
          },
        },
      },
      series: [
        {
          name: "卧室1",
          data: [100, 320, 520, 590, 520, 390, 350, 500, 300, 400, 410, 390],
          type: "line",
          color: "#05c985",
        },
        {
          name: "工作室",
          data: [100, 400, 430, 400, 430, 400, 450, 430, 480, 470, 330, 480],
          type: "line",
          color: "#ffab4f",
        },
        {
          name: "卧室2",
          data: [100, 280, 320, 300, 320, 300, 330, 340, 330, 400, 300, 280],
          type: "line",
          color: "#ee423d",
        },
        {
          name: "厨房",
          data: [100, 200, 180, 190, 280, 230, 180, 190, 230, 180, 190, 150],
          type: "line",
          color: "#843fa0",
        },
      ],
    },

    {
      grid: {
        left: 30,
        top: 10,
        bottom: 30,
        right: 30,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#242e42",
          },
        },
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
      },
      yAxis: {
        type: "value",
        scale: true,
        splitLine: {
          show: true,
          lineStyle: {
            type: "soild",
            color: "#242e42",
          },
        },
      },
      series: [
        {
          name: "卧室1",
          data: [100, 320, 520, 590, 520, 390, 350, 500, 300, 400, 410, 390],
          type: "line",
          color: "#05c985",
        },
        {
          name: "工作室",
          data: [100, 400, 430, 400, 430, 400, 450, 430, 480, 470, 330, 480],
          type: "line",
          color: "#ffab4f",
        },
        {
          name: "卧室2",
          data: [100, 280, 320, 300, 320, 300, 330, 340, 330, 400, 300, 280],
          type: "line",
          color: "#ee423d",
        },
        {
          name: "厨房",
          data: [
            1000, 2000, 1800, 1900, 2800, 2300, 1800, 1900, 2300, 1800, 1900,
            1500,
          ],
          type: "line",
          color: "#843fa0",
        },
      ],
    },
    {
      grid: {
        left: 30,
        top: 10,
        bottom: 30,
        right: 30,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#242e42",
          },
        },
        data: ["周1", "周2", "周3", "周4", "周5", "周6", "周日"],
      },
      yAxis: {
        type: "value",
        scale: true,
        splitLine: {
          show: true,
          lineStyle: {
            type: "soild",
            color: "#242e42",
          },
        },
      },
      series: [
        {
          name: "卧室1",
          data: [100, 320, 520, 590, 520, 390, 350],
          type: "line",
          color: "#05c985",
        },
        {
          name: "工作室",
          data: [100, 400, 430, 400, 430, 400, 450],
          type: "line",
          color: "#ffab4f",
        },
        {
          name: "卧室2",
          data: [100, 280, 320, 300, 320, 300, 330],
          type: "line",
          color: "#ee423d",
        },
        {
          name: "厨房",
          data: [100, 200, 180, 190, 280, 230, 180, 190],
          type: "line",
          color: "#843fa0",
        },
      ],
    },
    {
      grid: {
        left: 30,
        top: 10,
        bottom: 30,
        right: 30,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#242e42",
          },
        },
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
      },
      yAxis: {
        type: "value",
        scale: true,
        splitLine: {
          show: true,
          lineStyle: {
            type: "soild",
            color: "#242e42",
          },
        },
      },
      series: [
        {
          name: "卧室1",
          data: [100, 320, 520, 590, 520, 390, 350, 500, 300, 400, 410, 390],
          type: "line",
          color: "#05c985",
        },
        {
          name: "工作室",
          data: [100, 400, 430, 400, 430, 400, 450, 430, 480, 470, 330, 480],
          type: "line",
          color: "#ffab4f",
        },
        {
          name: "卧室2",
          data: [100, 280, 320, 300, 320, 300, 330, 340, 330, 400, 300, 280],
          type: "line",
          color: "#ee423d",
        },
        {
          name: "厨房",
          data: [
            1000, 2000, 1800, 1900, 2800, 2300, 1800, 1900, 2300, 1800, 1900,
            1500,
          ],
          type: "line",
          color: "#843fa0",
        },
      ],
    },
  ];
  let showcharts = [
    {
      id: 1,
      title: "年",
    },
    {
      id: 2,
      title: "月",
    },
    {
      id: 3,
      title: "周",
    },
    {
      id: 4,
      title: "日",
    },
  ];
  useEffect(() => {
    chnageac(nowac);
  }, []);
  function chnageac(index: number) {
    setnowac(index);
    setcharts_one(chartsdata[index]);
  }

  let [nowac, setnowac] = useState(0);
  let [charts_one, setcharts_one] = useState({});

  //   middle
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
    // selectclick();
  };
  let [middleData,setMiddleData] =useState([
    {
      id: 1,
      count: 10,
      title: "摄像头",
      icon: CameraFilled ,
      options: [
        { value: "now", label: "这个月" },
        { value: "prev", label: "上个月" },
        { value: "next", label: "下个月" },
      ],
      mian: [
        { id: 11, icon: FieldTimeOutlined, data: "57:03:24", qifu: "-24%" },
        { id: 12, icon: FieldTimeOutlined, data: "320 Wh", qifu: "-24%" },
      ],
    },
    {
      id: 2,
      count: 50,
      title: "水量",
      icon: ExperimentFilled ,
      options: [
        { value: "now", label: "这个月" },
        { value: "prev", label: "上个月" },
        { value: "next", label: "下个月" },
      ],
      mian: [
        { id: 21, icon: FieldTimeOutlined, data: "57:03:24", qifu: "-24%" },
        { id: 22, icon: FieldTimeOutlined, data: "320 Wh", qifu: "-24%" },
      ],
    },
    {
      id: 3,
      count: 95,
      title: "大灯",
      icon: BulbFilled,
      options: [
        { value: "now", label: "这个月" },
        { value: "prev", label: "上个月" },
        { value: "next", label: "下个月" },
      ],
      mian: [
        { id: 31, icon: FieldTimeOutlined, data: "57:03:24", qifu: "-24%" },
        { id: 32, icon: FieldTimeOutlined, data: "320 Wh", qifu: "-24%" },
      ],
    },
    {
      id: 4,
      count: 75,
      title: "插座",
      icon: ApiFilled ,
      options: [
        { value: "now", label: "这个月" },
        { value: "prev", label: "上个月" },
        { value: "next", label: "下个月" },
      ],
      mian: [
        { id: 41, icon: FieldTimeOutlined, data: "57:03:24", qifu: "-24%" },
        { id: 42, icon: FieldTimeOutlined, data: "320 Wh", qifu: "-24%" },
      ],
    },
  ]) 
  // 底部图
  let [btmData, setBtmData] = useState([
    {
      id: 1,
      options: {
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
        },

        legend: {
          show: false,
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          show: false,
        },
        yAxis: {
          type: "value",
          show: false,
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
            symbol:"none",
            itemStyle:{
              color:"#05c985"
            }
          },
        ],
      },
      title: "客厅",
      count: 189,
    },
    {
      id: 2,
      options: {
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
        },

        legend: {
          show: false,
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          show: false,
        },
        yAxis: {
          type: "value",
          show: false,
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
            symbol:"none",
            itemStyle:{
              color: "#827250",
            }
          },
        ],
      },
      
      title: "插座",
      count: 189,
    },
    {
      id: 3,
      options: {
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
        },

        legend: {
          show: false,
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          show: false,
        },
        yAxis: {
          type: "value",
          show: false,
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
            symbol:"none",
            itemStyle:{
              color: "#ee423d",
            }
          },
        ],
      },
      
      title: "卧室",
      count: 189,
    },
    {
      id: 4,
      options: {
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
        },

        legend: {
          show: false,
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          show: false,
        },
        yAxis: {
          type: "value",
          show: false,
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
            symbol:"none",
            itemStyle:{
              color:"#843fa0"
            }
          },
        ],
      },
      title: "厨房",
      count: 189,
    },
  ]);
  return (
    <div className="fenxi">
      <TitleBar
        title="智能分析"
        Icon={SettingOutlined}
        callback={() => console.log(1)}
      ></TitleBar>
      <div className="fenximain">
        <div className="fenxititle">
          <div>能量消耗</div>
          <div style={{ display: "flex" }}>
            {showcharts.map((item, index) => {
              return (
                <div
                  style={{ padding: "5px 20px", cursor: "pointer" }}
                  className={nowac === index ? "ac" : ""}
                  key={item.id}
                  onClick={() => chnageac(index)}
                >
                  {item.title}
                </div>
              );
            })}
          </div>
        </div>
        <div className="fenxitop">
          <div className="fenxitop1">
            {xiaohao.map((item) => {
              return (
                <div className="fenxitop1item" key={item.id}>
                  <Progress
                    className="progress"
                    type="circle"
                    percent={item.count}
                    strokeColor={item.color}
                    size={60}
                    showInfo
                    trailColor="#3e4e6c"
                    format={(number)=><span style={{color:"#fff"}}>{number}%</span>}
                    strokeWidth={12}
                  ></Progress>
                  <div
                    style={{
                      height: "100%",
                      display: "flex",
                      flexDirection: "column",
                      justifyContent: "flex-start",
                      boxSizing: "border-box",
                      padding: "10px 0",
                    }}
                  >
                    <p style={{ color: "#fff" }}>{item.title}</p>
                    <p style={{ fontSize: "10px" }}>{item.juli} KM</p>
                  </div>
                </div>
              );
            })}
          </div>
          <div className="fenxitop2">
            <ReactECharts
              option={charts_one}
              style={{
                width: "100%",
                height: "100%",
                boxSizing: "border-box",
                padding: "0",
              }}
            />
          </div>
        </div>
        <div className="fenximiddle">
          {middleData.map((item:any) => {
            return (
              <div className="fenximiddleitem" key={item.id}>
                <div className="middleitemtop">
                  <span>{item.title}</span>
                  <Select
                    defaultValue="now"
                    style={{
                      width: 140,
                      height: 32,
                      lineHeight: 32,
                      background: "#20293c",
                      borderRadius: 5,
                    }}
                    onChange={handleChange}
                    suffixIcon={
                      <CaretDownOutlined style={{ color: "#657d95" }} />
                    }
                    bordered={false}
                    options={item.options}
                  />
                </div>
                <div className="middleitemmain">
                  <Progress
                    type="circle"
                    percent={item.count}
                    strokeColor="#1f8efa"
                    size={90}
                    strokeWidth={12}
                    format={()=><item.icon style={{color:"#ffffff",fontSize:"30px"}}/>}
                    trailColor="#3e4e6c"
                  ></Progress>
                  <div className="middlemainright">
                    {item.mian.map((i:any) => {
                      return (
                        <div key={i.id}>
                          <i.icon />
                          <span style={{ color: "#fff", fontWeight: "bold" }}>
                            {i.data}
                          </span>
                          <span>({i.qifu})</span>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        <div className="fenxibottom">
          {btmData.map((item: any) => {
            return (
              <div className="btmitem" key={item.id}>
                <div className="btmitemleft">
                  <div style={{ display: "flex", alignItems: "center" }}>
                    <span style={{ fontSize: "26px", color: "#fff" }}>
                      {item.count}
                    </span>
                    <div style={{ margin: "0 10px" }}>
                      <InfoCircleFilled
                        style={{ color: "#657d95", fontSize: "10px" }}
                      />
                      <div style={{ color: "#657d95", fontWeight: "600" }}>
                        K W H
                      </div>
                    </div>
                  </div>
                  <div style={{ color: "#657d95", textIndent: "1px" }}>
                    {item.title}
                  </div>
                </div>
                <div className="btmitemright">
                  <ReactECharts
                    option={item.options}
                    style={{ width: "100%", height: "100%" }}
                  />
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

export default Fenxi;
